<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>01__表格隔行变色</title>
  <style>

    #data {
      width: 600px;
    }
    #data,td,th {
      /* 表格设置合并边框 */
      border-collapse: collapse;
      border: 1px solid #aaaaaa;
      text-align: center;
    }
    th,td {
      height: 28px;
    }
    #data thead {
      background-color: #333399;
      color: #ffffff;
    }
  </style>
</head>

<body>
  <table id="data">
    <thead>
      <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>入职时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>$3500</td>
        <td>2010-10-25</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>$3400</td>
        <td>2010-12-1</td>
      </tr>
      <tr>
        <td>King</td>
        <td>$5900</td>
        <td>2009-08-17</td>
      </tr>
      <tr>
        <td>Scott</td>
        <td>$3800</td>
        <td>2012-11-17</td>
      </tr>
      <tr>
        <td>Smith</td>
        <td>$3100</td>
        <td>2014-01-27</td>
      </tr>
      <tr>
        <td>Allen</td>
        <td>$3700</td>
        <td>2011-12-05</td>
      </tr>
    </tbody>
  </table>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function () {
      $('#data>tbody>tr:odd').css({
        background: '#ccccff'
      })
    })
    

  </script>
</body>

</html>